<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/comment.css" rel="stylesheet" />
		<link href="css/main.css" rel="stylesheet" />
	</head>

	<body>
		<nav class="main_nav mui-bar-tab">
			<a class="mui-tab-item mui-active" href="index.html" id="index">
				<img class="state1" src="images/main_nav01.png" alt="">
				<img class="state2" src="images/main_nav04.png" alt="">
				<div>首页</div>
			</a>
			<a class="mui-tab-item" href="equipment.html" id="equipment">
				<img class="state1" src="images/main_nav02.png" alt="">
				<img class="state2" src="images/main_nav05.png" alt="">
				<div>设备</div>
			</a>
			<a class="mui-tab-item" href="center.html" id="center">
				<img class="state1" src="images/main_nav03.png" alt="">
				<img class="state2" src="images/main_nav06.png" alt="">
				<div>我的</div>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/rem.js"></script><strong></strong>
		<script type="text/javascript">
			mui.init();
			var subpages = ['index.html', 'equipment.html', 'center.html'];
			var subpage_style = {
				top: '0px',
				bottom: '51px'
			};
			var aniShow = {};
			mui.plusReady(function() {
				//监测网络状态
				wainshow();
				document.addEventListener("netchange", wainshow, false);

				function wainshow() {
					if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {;
						mui.alert("网络异常，请检查网络设置！", "消息提示", "确定");
					} else {

					}
				};
				//收到透传消息  
				//只有APP在线时，才会触发receive事件，透传消息不会触发系统消息,需要创建本地消息  
				plus.push.addEventListener("receive", function(msg) {
					console.log("(receive):" + JSON.stringify(msg)); 
					if (mui.os.ios) { //如果是IOS  
						//【APP离线】收到消息，但没有提醒（发生在一次收到多个离线消息时，只有一个有提醒，但其他的没有提醒）  
						//【APP在线】收到消息，不会触发系统消息,需要创建本地消息，但不能重复创建。必须加msg.type验证去除死循环                
						if (msg.aps == null && msg.type == "receive") {
							//alert(msg.content)
							var options = {cover:false}; 
							//创建本地消息,发送的本地消息也会被receive方法接收到，但没有type属性，且aps是null
							plus.push.createMessage(msg.content,"LocalMSG",options);
						}
					}
					if (!mui.os.ios) { //如果是Android，当APP在线时，收到透传消息不会进入系统消息，需要发送本地提醒。  
						var options = {cover:false};
						plus.push.createMessage(msg.content,"LocalMSG",options);
					}
				}, false);

				//消息点击事件  
				//【APP在线】，收到透传消息通过，不会提醒至通知栏目，需要发送本地消息，再进行点击触发的点击事件。  
				//【APP离线】，收到离线透传消息，必须通过Java后台的Intent字符串携带payload，且符合格式才能触发click事件，格式不符合不会触发。  
				plus.push.addEventListener("click", function(msg) {
					console.log("(click):" + JSON.stringify(msg));
					if (mui.os.ios) { //如果是IOS  
						messageClick();
					}
					if (!mui.os.ios) { //如果是Android，收到playload均是是JSON字符串，需要转为JSON对象  
						messageClick();
					}
				}, false);
				function	messageClick(){
					mui.openWindow({
						url: "alarmMessage.html",
						id: "alarmMessage.html",
						extras: {
							info: 0
						},
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
						}
					})
				};
				//点击返回
				mui.back = function() {
					var btnArray = ['是', '否'];
					mui.confirm('是否退出应用', '远程监控', btnArray,
						function(e) {
							if (e.index == 0) {
								plus.runtime.quit();
							}
						})
				};
				//底部导航
				var self = plus.webview.currentWebview();
				for (var i = 0; i < 3; i++) {
					var temp = {};
					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
					if (i != 0) { //当前激活页面,从0开始
						sub.hide();
					} else {
						temp[subpages[i]] = "true";
						mui.extend(aniShow, temp);
					}
					self.append(sub);

				}
				//当前激活选项
				var activeTab = subpages[0];
				//选项卡点击事件
				mui('.main_nav').on('tap', 'a', function(e) {
					var targetTab = this.getAttribute('href');
					if (targetTab == activeTab) {
						return;
					}
					//显示目标选项卡
					//若为iOS平台或非首次显示，则直接显示
					if (mui.os.ios || aniShow[targetTab]) {
						console.log(targetTab);
						plus.webview.show(targetTab);
					} else {
						//否则，使用fade-in动画，且保存变量
						var temp = {};
						temp[targetTab] = "true";
						mui.extend(aniShow, temp);
						plus.webview.show(targetTab, "fade-in", 300);
					}
					//隐藏当前;
					plus.webview.hide(activeTab);
					//更改当前活跃的选项卡
					activeTab = targetTab;
				});
				//自定义事件，模拟点击“首页选项卡”
				document.addEventListener('gohome', function() {
					var defaultTab = document.getElementById("defaultTab");
					//模拟首页点击
					mui.trigger(defaultTab, 'tap');
					//切换选项卡高亮
					var current = document.querySelector(".mui-tab-item.mui-active");
					if (defaultTab !== current) {
						current.classList.remove('mui-active');
						defaultTab.classList.add('mui-active');
					}
				});
				//自定义--竖屏
				window.addEventListener('screen', function(event) {
					console.log("main竖屏");
					plus.screen.unlockOrientation();
					plus.screen.lockOrientation("portrait-primary")
				});
				/* 跳转登录页面 */
				// $('#center').on('tap', function() {
				// 	mui.openWindow({
				// 		url: 'login.html',
				// 		id: 'login.html'
				// 	})
				// })
			});

			function home() {
				console.log('home');
				var index = document.getElementById("index");
				//模拟首页点击
				mui.trigger(index, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if (index !== current) {
					current.classList.remove('mui-active');
					index.classList.add('mui-active');
				}
			}

			function equi(e) {
				console.log(e);
				var reg = document.getElementById("equipment");
				//模拟首页点击
				mui.trigger(reg, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if (reg !== current) {
					current.classList.remove('mui-active');
					reg.classList.add('mui-active');
				}
				var main = plus.webview.getWebviewById('equipment.html');
				mui.fire(main, 'eqId', {
					id: e
				});
			};
		</script>
	</body>

</html>
